<template>
    <el-form ref="formRef" :model="shareLinkInfo" :rules="rules" label-width="121">
        <aside class="form-title">活动链接设置</aside>
        <el-form-item label="封面" prop="link_img">
            <single-upload v-model="shareLinkInfo.link_img" label="更换封面" accept=".jpg,.png" size="200">
                <template #tip> 支持JPG、PNG格式，大小200KB以内，建议长宽比为1:1 </template>
            </single-upload>
        </el-form-item>
        <el-form-item label="标题" prop="link_title" style="margin-left: -1px">
            <el-input v-model="shareLinkInfo.link_title" maxlength="20" show-word-limit placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="描述" prop="link_desc">
            <el-input v-model="shareLinkInfo.link_desc" maxlength="30" show-word-limit placeholder="请输入描述" />
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import singleUpload from '../award-settings/components/prize-from-dialog/single-upload.vue';

import { ref, reactive, computed, onUnmounted } from 'vue';
import { FormRules, FormInstance } from 'element-plus';
import { formParams, setShareFormParams, initFormParams } from './utils/paramsManager';

const emit = defineEmits(['update:modelValue']);

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => ({})
    }
});

const shareLinkInfo: any = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const formRef = ref<FormInstance>();

const rules = reactive<FormRules>({
    link_title: [{ required: true, message: '请输入活动链接设置标题' }],
    link_desc: [{ message: '请输入活动链接设置描述' }]
});

/**
 * 校验分享设置表单
 */
const validate = async () => {
    return await formRef.value?.validate();
};

const setFormParams = (data: any) => {
    setShareFormParams(data);
};

const getFormParams = async (data: any) => {
    const res = await formRef.value?.validate();
    if (!res) {
        return false;
    }
    return formParams;
};

onUnmounted(() => {
    // 组件销毁后初始化params
    initFormParams();
});

defineExpose({
    validate,
    setFormParams,
    getFormParams
});
</script>
<style lang="scss" scoped>
// 模块小标题
.form-title {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    color: #333333;
    font-family: PingFangSC-Medium, PingFang SC;
    font-size: 16px;
    font-weight: 500;
    &::before {
        width: 3px;
        height: 16px;
        margin-right: 6px;
        content: '';
        border-radius: 2px;
        background-color: #ff6b00;
    }
}
</style>
